{% extends 'base.html' %}

{% block title %}首页{% endblock %}

{% block content %}
    <div class="mb-4">
        <h1 class="fw-bold">最新文章</h1>
        <div class="border-bottom border-2 border-primary w-25 mb-4"></div>
    </div>

    <!-- 文章列表 -->
    {% for post in posts %}
    <div class="card mb-4 shadow-sm">
        {% if post.image %}
        <img src="{{ post.image.url }}" class="card-img-top" alt="{{ post.title }}" style="height: 300px; object-fit: cover;">
        {% endif %}
        <div class="card-body">
            <div class="mb-2">
                <span class="badge bg-primary me-2">
                    <a href="{% url 'category' post.category.name|slugify %}" class="text-white text-decoration-none">
                        {{ post.category.name }}
                    </a>
                </span>
                {% for tag in post.tags.all %}
                <span class="badge bg-secondary me-2">
                    <a href="{% url 'tag' tag.name|slugify %}" class="text-white text-decoration-none">
                        {{ tag.name }}
                    </a>
                </span>
                {% endfor %}
            </div>
            <h2 class="card-title h4">
                <a href="{{ post.get_absolute_url }}" class="text-dark text-decoration-none">{{ post.title }}</a>
            </h2>
            <p class="card-text">{{ post.excerpt }}</p>
            <div class="d-flex justify-content-between align-items-center">
                <div class="d-flex align-items-center">
                    <img src="https://picsum.photos/id/{{ post.author.id }}/40/40" alt="{{ post.author.username }}" class="rounded-circle me-2" width="40" height="40">
                    <div>
                        <div class="fw-bold">{{ post.author.username }}</div>
                        <div class="text-muted small">{{ post.created_at|date:"Y-m-d H:i" }}</div>
                    </div>
                </div>
                <div class="text-muted small">
                    <i class="fa fa-eye me-1"></i> {{ post.views }}
                    <i class="fa fa-comment me-1 ms-2"></i> {{ post.comments.count }}
                </div>
            </div>
        </div>
    </div>
    {% endfor %}

    <!-- 分页 -->
    {% if is_paginated %}
    <nav aria-label="Page navigation">
        <ul class="pagination justify-content-center">
            {% if page_obj.has_previous %}
            <li class="page-item">
                <a class="page-link" href="?page=1{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}" aria-label="First">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}" aria-label="Previous">
                    <span aria-hidden="true">&lsaquo;</span>
                </a>
            </li>
            {% endif %}

            {% for num in page_obj.paginator.page_range %}
            {% if page_obj.number == num %}
            <li class="page-item active"><a class="page-link" href="?page={{ num }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}">{{ num }}</a></li>
            {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
            <li class="page-item"><a class="page-link" href="?page={{ num }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}">{{ num }}</a></li>
            {% endif %}
            {% endfor %}

            {% if page_obj.has_next %}
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}" aria-label="Next">
                    <span aria-hidden="true">&rsaquo;</span>
                </a>
            </li>
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}" aria-label="Last">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
            {% endif %}
        </ul>
    </nav>
    {% endif %}
{% endblock %}